<template>
  <div class="indexpage-container">
    <div class="sidebar">
      <button @click="switchPage('selfResponsibility')">首页</button>
      <button @click="switchPage('productInventory')">产品库存</button>
      <button @click="switchPage('orderStatus')">订单状态</button>
      <button @click="switchPage('salesTrend')">销售趋势</button>
      <button @click="switchPage('productInfo')">产品信息</button>
      <button @click="switchPage('personalInfo')">个人信息</button>
    </div>
    <div class="content">
      <component :is="currentPageComponent"></component>
    </div>
  </div>
</template>

<script>
import BeginPage from './seller/begin.vue';
// 其他页面组件导入
import ProductInventoryPage from './seller/product_inventory.vue';
import OrderStatusPage from './seller/order_status.vue';
import SalesTrendPage from './seller/sales_trend.vue';
import ProductInfoPage from './seller/product_info.vue';
import PersonalInfoPage from './seller/personal_info.vue';

export default {
  name: 'SellerPage',
  data () {
    return {
      currentPageComponent: BeginPage // 默认组件
    }
  },
  methods: {
    switchPage(page) {
      const pageComponentMap = {
        'selfResponsibility': BeginPage,
        'productInventory': ProductInventoryPage,
        'orderStatus': OrderStatusPage,
        'salesTrend': SalesTrendPage,
        'productInfo': ProductInfoPage,
        'personalInfo': PersonalInfoPage
      };
      this.currentPageComponent = pageComponentMap[page]; // 切换到对应的组件
    }
  },
  mounted() {},
  computed: {}
}
</script>

<style scoped>
@import '@/assets/css/indexpage.css';
</style>